<!--  -->
<template>
  <div class="home">
    <HomeHeader/>
    <div class="ly-tab-wrap">
      <ly-tab v-model="selectedId" :items="items" :options="options" @change="changeTab"></ly-tab>
      <div class="ly-cate" @click="toCategory">
        <i class="iconfont icon-tubiao13"></i>
        <span>分类</span>
      </div>
    </div>
    <div
      style="
        height: 8.8rem;
        width: 100%;
        background: green;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
      "
      v-if="selectedId!=0"
    ></div>
    <component :is="homeCom"></component>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeHeader from "./components/HomeHeader.vue";
import HomeIndex from "./childrenviews/HomeIndex.vue";
import HomeCate from "./childrenviews/HomeCate.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeHeader,
    HomeIndex,
    HomeCate
  },
  data() {
    //这里存放数据
    return {
      selectedId: 0,
      items: [
        {
          label: "首页",
          cat_id: ""
        },
        {
          label: "家用电器",
          cat_id: 858
        },
        { label: "男装女装", cat_id: 6 },
        { label: "鞋靴箱包", cat_id: 8 },
        { label: "手机数码", cat_id: 3 },
        { label: "电脑办公", cat_id: 4 },
        { label: "家居家纺", cat_id: 5 },
        { label: "个人化妆", cat_id: 860 }
      ],
      options: {
        activeColor: "#fff"
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
      homeCom: "HomeIndex"
    };
  },
  //方法集合
  methods: {
    toCategory() {
      this.$router.push("/category"); //编程式导航
    },
    changeTab(item, index) {
      // console.log(index);
      if (index == 0) {
        this.homeCom = "HomeIndex";
      } else {
        this.homeCom = "HomeCate";
        console.log(item.cat_id);
        this.$store.dispatch("actChangeHomeCateListDatas", {
          cat_id: item.cat_id
        });
        this.$store.commit("changeCatId", item.cat_id);
        this.$store.state.homeCoodsListDatas = [];
      }
    }
  }
};
</script>
<style lang="less">
.ly-tab-wrap {
  height: 4.4rem;
  display: flex;
  position: fixed;
  top: 4.4rem;
  z-index: 999;
  left: 0;
  .ly-tab {
    width: 80%;
    .ly-tabbar {
      background-color: transparent;
      box-shadow: 0 0px 0px 0px #eee;
      border-bottom: none;
      .ly-tab-list {
        height: 4.4rem;
        padding: 0;
        .ly-tab-item {
          color: #fff;
        }
      }
    }
  }
  .ly-cate {
    width: 20%;
    line-height: 4.4rem;
    text-align: center;
    background: transparent;
    color: #fff;
    i {
      font-size: 2rem;
    }
    span {
      font-size: 1.6rem;
    }
  }
}
</style>